<template>
  <div class="wh100">
    <el-button type="primary" @click="roleBindAdmin()">确认</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="
        width: 100%;
        margin-top: 12px;
        background-color: #303136;
        color: #ffff;
      "
      :border="false"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="nickname" label="用户名"> </el-table-column>
      <el-table-column prop="username" label="账号"> </el-table-column>
      <el-table-column prop="dept" label="所属部门"> </el-table-column>
      <el-table-column prop="role" label="功能角色"> </el-table-column>
      <el-table-column prop="isDisable" label="状态">
        <template slot-scope="scope">
          <span style="color: #3ad76e" v-if="scope.row.isDisable == 0"
            >启用</span
          >
          <span style="color: #e6873a" v-else>禁用</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getAdminList } from "@/api/admin";
import { roleBindAdmin } from "@/api/auth";
export default {
  props: ["roleId"],
  data() {
    return {
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      totalCount: 0,

      userIds: [],
    };
  },
  mounted() {
    this.getAdminList();
  },
  methods: {
    async getAdminList() {
      let res = await getAdminList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });
      if (res.code == 200) {
        this.tableData = Array.from(
          new Set([...this.tableData, ...res.data.lists])
        );

        this.totalCount = res.data.count;
      }
    },

    handleSelectionChange(val) {
      val.forEach((item) => {
        this.userIds.push(item.id);
      });
    },

    async roleBindAdmin() {
      if (this.userIds.length == 0) {
        this.$message({
          message: "请选择用户",
          type: "error",
        });
        return;
      }
      let res = await roleBindAdmin({
        userIds: this.userIds.join(","),
        roleId: this.roleId,
      });

      if (res.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.$emit("onClose", {
          isClose: true,
        });
      }
    },

    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.tableData = [];
      this.getAdminList();
    },
    handleCurrentChange(e) {
      this.pageNo = e;
      this.tableData = [];
      this.getAdminList();
    },
  },
};
</script>

<style lang="scss" scoped>
.table-pagination {
  width: 100%;
  text-align: right;
  padding: 30px 0;
  box-sizing: border-box;
}
</style>